<template>
	<view class="picker-wrap">
		<view class="face-tab">
			<view class="item" :class="{cur:faceType=='emoji'}" @tap="faceType='emoji'">
				<text class="cuIcon-emoji"></text>
			</view>
			<view class="item" :class="{cur:faceType=='custom'}" @tap="faceType='custom'">
				<text class="iconfont icon-heart"></text>
			</view>
		</view>
		<view class="content">
			<scroll-view class="scroll" v-show="faceType=='emoji'" scroll-y>
				<view class="emojis">
					<view class="emoji" v-for="(item,index) in emojis" :key="index">
						<image :src="item.url" @tap="chooseEmoji(item)" />
					</view>
				</view>
			</scroll-view>
			<scroll-view v-show="faceType=='custom'" scroll-y @scrolltolower="moreFace">
				<view class="customs">
					<view class="item" @tap="jumpTo(`/pages/face/my`)">
						<view class="add">
							<text class="cuIcon-add"></text>
						</view>
					</view>
					<view class="item" v-for="(item,idx) in faces.list" :key="item.id">
						<image class="img" :src="item.imgUrl" mode="aspectFit" @tap="chooseFace(item)" />
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {jumpTo} from "@/utils/util.js"
	import { makeEmojiList } from '@/utils/emojiMap'
	import { getMyfaces } from '@/api/face'
	export default{
		data(){
			return{
				faceType:'emoji', 
				emojis:makeEmojiList(),
				faces:{ 
					list:[],
					pageNo:1,
					pageSize:20,
					nomore:false,
					loading:false
				},
			}
		},
		created() {
			uni.$on('custom_face_changed',this.resetFace)
			this.moreFace()
		},
		beforeDestroy() {
			uni.$off('custom_face_changed',this.resetFace)
		},
		methods:{
			jumpTo,
			chooseEmoji(emoji){
				this.$emit('emoji',emoji)
			},
			chooseFace(face){
				this.$emit('face',face)
			},
			async resetFace(){
				this.faces.list = []
				this.faces.pageNo = 1
				this.faces.nomore = false
				await this.moreFace()
			},
			async moreFace(){
				if(this.faces.loading){
					throw new Error('正在请求中')
				}
				try{
					this.faces.loading = true
					if(this.faces.nomore){
						return []
					}
					const list = await getMyfaces(this.faces.pageNo)
					if(!list||list.length<this.faces.pageSize){
						this.faces.nomore = true
					}else{
						this.faces.pageNo++
					}
					this.faces.list.push(...list)
					return list
				}finally{
					this.faces.loading = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.picker-wrap{
		width: 100%;
		height: 100%;
		.face-tab{
			display: flex;
			padding: 10rpx 20rpx;
			height: 90rpx;
			.item{
				height: 70rpx;
				width: 70rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 46rpx;
				border-radius: 10rpx;
				&.cur{
					background-color: #FFFFFF;
				}
				&+.item{
					margin-left: 20rpx;
				}
			}
		}
		.content{
			height: calc(100% - 90rpx);
		}
		.scroll{
			width: 100%;
			height: 100%;
		}
		.emojis{
			display: grid;
			grid-template-columns: repeat(8, 1fr);
			.emoji {
				display: flex;
				justify-content: center;
				margin: 10rpx 0;
			
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		.customs{
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 30rpx;
			.item{
				width: 122rpx;
				height: 122rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				&:nth-of-type(5n){
					margin-right: 0;
				}
			}
			.add{
				font-size: 90rpx;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx dashed #666666;
				color: #666666;
				border-radius: 14rpx;
			}
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>